<template>
	<!-- @touchmove.stop.prevent 禁止滑动，给一个空函数 -->
	<view id="tab-bar" class="tab-bar" @touchmove.stop.prevent="()=>{}">
		<view class="bar-view">
			<view class="bar-item" v-for="(item, index) in tabs" :key="index" :class="{'current': index === value}"
				@click="changeTab(index)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//当前所在选项索引值 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
			value: {
				type: Number,
				default: 0
			},
			tabs: { // 选项数组
				type: Array,
				default: () => [{
					id: '1',
					name: '课程'
				}, {
					id: '2',
					name: '文章'
				}, {
					id: '3',
					name: '问答'
				}]
			}
		},

		methods: {
			changeTab(index) {
				if (this.value != index) {
					// 可以不用直接赋值，使用 v-model 双向绑定 value
					// this.value = index
					this.$emit("input", index);
				}
			}
		},
	}
</script>

<style lang="scss">
	.tab-bar {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #efeff4;

		.bar-view {
			width: 100%;
			text-align: center;
			display: flex;

			.bar-item {
				flex: 1;
				font-size: 30rpx;
				line-height: 80rpx;
				position: relative;

				&:after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border-bottom: 6rpx solid skyblue;
					border-radius: 20rpx;
					left: 50%;
					bottom: 6rpx;
					transform: translateX(-50%);
					transition: .3s;
				}
			}

			.current {
				color: skyblue;

				&:after {
					width: 60rpx;
				}
			}
		}
	}
</style>
